#index {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    height: 100%;

    #dv-full-screen-container {
        position: absolute;
    }

    .bg {
        padding: 0.1rem;
        //background-image: url("../assets/pageBg.png");
        background-image: url("../assets/pageBg.jpg");
        background-size: cover;
        background-position: center center;
    }

    .host-body {
        //display: flex;
        //flex-direction: column;
        display: grid;
        grid-template-columns: repeat(1, 100%);
        grid-template-rows: 1.5rem auto;
        height: 100%;

        .title {
            position: relative;
            width: 8rem;
            text-align: center;
            background-size: cover;
            background-repeat: no-repeat;

            .title-text {
                min-width: 80%;
                font-size: 0.5rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .title-bototm {
                position: absolute;
                bottom: -0.375rem;
                left: 50%;
                transform: translate(-50%);
            }
        }

        // 平行四边形
        .react-left {
            cursor: pointer;
            font-size: 0.225rem;
            width: 3.75rem;
            height: 0.65rem;
            line-height: 0.65rem;
            text-align: center;
            transform: skewX(-45deg);

            .react-after {
                position: absolute;
                right: -0.3125rem;
                top: 0;
                height: 0.65rem;
                width: 0.65rem;
                background-color: #0f1325;
                transform: skewX(45deg);
            }

            .text {
                display: inline-block;
                transform: skewX(45deg);
            }
            .text.refresh{
                width: 0.65rem;
                height: 0.65rem;
                line-height: 0.65rem;
                text-align: center;
                font-size: 0.35rem;
                vertical-align: middle;
                animation: refreshRotate 1.25s linear 0s infinite;
                -webkit-animation: refreshRotate 1.25s linear 0s infinite;
            }
        }

        .react-right {
            cursor: pointer;
            font-size: 0.225rem;
            width: 3.75rem;
            height: 0.65rem;
            line-height: 0.65rem;
            text-align: center;
            transform: skewX(45deg);

            .react-before {
                position: absolute;
                left: -0.3125rem;
                top: 0;
                height: 0.65rem;
                width: 0.65rem;
                background-color: #0f1325;
                transform: skewX(-45deg);
            }

            .text {
                display: inline-block;
                transform: skewX(-45deg);
            }
        }

        .body-box {
            //display: flex;
            //flex-direction: column;
            display: grid;
            grid-template-columns: repeat(1, 100%);
            grid-template-rows: repeat(2, 50%);
            height: 100%;

            .chart-view-box {
                padding: 0.2rem 0.2rem 0 0.2rem;
                //height: 6rem;
                height: 100%;
                min-width: 3.75rem;
                border-radius: 0.0625rem;

                .bg-color-black {
                    height: calc(100% - 0.2rem);
                    border-radius: 0.125rem;
                    display: grid;
                    grid-template-columns: repeat(1, 100%);
                    grid-template-rows: 0.4rem auto;

                    .chart-title-box {
                        padding: 0 0.2rem;
                        line-height: 0.4rem;

                        .chart-icon {
                            //padding: 0.05rem 0 0 0;
                            color: #5cd9e8;
                            font-size: 0.2rem;
                        }

                        .chart-title {
                            font-size: 0.25rem;

                            .text {
                                color: #c3cbde;
                            }
                        }
                    }

                    .chart-index {
                        height: 100%;

                        .chart-container {
                            height: 100%;
                        }
                    }

                    //下滑线动态
                    .decoration2 {
                        position: absolute;
                        right: 0.125rem;
                        height: calc(100% - 0.4rem);

                        .dv-decoration-2 {
                            width: 0.1rem;
                            height: 100%;
                        }
                    }
                }
            }

            .top-box {
                display: grid;
                grid-template-columns: repeat(2, 50%);
            }

            //下方区域的布局
            .content-box {
                display: grid;
                grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
            }

            // 底部数据
            .bototm-box {
                display: grid;
                grid-template-columns: repeat(3, 33.3%);
            }
        }
    }
}
@keyframes refreshRotate {
    from {
        -webkit-transform: skewX(45deg) rotate(0deg);
        -moz-transform: skewX(45deg) rotate(0deg);
        -ms-transform: skewX(45deg) rotate(0deg);
        -o-transform: skewX(45deg) rotate(0deg);
        transform: skewX(45deg) rotate(0deg);
    }
    to {
        -webkit-transform: skewX(45deg) rotate(360deg);
        -moz-transform: skewX(45deg) rotate(360deg);
        -ms-transform: skewX(45deg) rotate(360deg);
        -o-transform: skewX(45deg) rotate(360deg);
        transform: skewX(45deg) rotate(360deg);
    }
}
